<!-- 购物车列表--管理 -->
<script setup>

import { onShow } from '@dcloudio/uni-app'
import { ref, reactive } from 'vue'
import { getCardListApi, removeCardApi } from '@/api/shop.js'
import { numberUnify } from '@/utils'
import { toast } from '@/uni_modules/uview-plus';
// 数据
const data = reactive({
  list: [],
  checkedArr: [],
  isCheckedAll: false
})
onShow(() => {
  init()
})
function init() {
  getCardListApi({
  }).then(res => {
    const { validList, invalidList } = res.data
    invalidList.forEach(item => {
      item.isInvalid = true
    });
    data.list = [...validList, ...invalidList]

  })
}
// 删除购物车商品
function remove() {
  removeCardApi(data.checkedArr.map(item => item.id)).then(res => {
    data.checkedArr = []
    toast('移除成功!')
    init()
  })
}
// 选中变化
function checkedChange(list) {
  data.isCheckedAll = list.length == data.list.length
}
// 全选全不选
function checkedAllChange(checked) {
  data.checkedArr = checked ? data.list : []
}
// 返回
function back() {
  uni.navigateBack(
    {
      delta: 1
    }
  )
}
</script>

<template>
  <view class="carManage-page">
    <!-- 头部 -->
    <view class="head">
      <view class="left">
        <up-checkbox v-model:checked="data.isCheckedAll" :usedAlone="true" shape="circle" placement="row"
          activeColor="#FFC870" @change="checkedAllChange"></up-checkbox>
        <text>全选</text>
      </view>
      <view class="right" @click="back">
        <text>完成</text>
      </view>
    </view>
    <!-- 购物车列表 -->
    <view class="car-list-box">
      <up-checkbox-group v-model="data.checkedArr" placement="column" inactiveColor="#CCCCCC" activeColor="#FFC870"
        @change="checkedChange">
        <view class="item" v-for="item in data.list" :key="item">
          <up-checkbox shape="circle" :name="item" label=""></up-checkbox>
          <view class="card">
            <view class="left">
              <image style="width: 120rpx; height: 120rpx;" :src="item.spu.picUrl" mode="scaleToFill" />
              <view v-show="item.isInvalid" class="mask-box">
                <text>已下架</text>
              </view>
            </view>
            <view class="right">
              <view class="title up-line-2">
                <text>{{ item.spu.name }}</text>
              </view>
              <view class="sku">
                <text>规格：{{ item.sku.properties[0].valueName }}</text>
              </view>
              <view class="price-box">
                <view class="present-price">￥ {{ numberUnify(item.sku.price / 100) }}</view>
                <view class="original-price">¥{{ numberUnify(item.sku.marketPrice / 100) }}</view>
              </view>
            </view>
          </view>
        </view>
      </up-checkbox-group>
    </view>
    <!-- 底部栏 -->
    <view class="bottom-bar">
      <view class="content">
        <u-button type="primary" size="large" @click="remove">移出购物车</u-button>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.carManage-page {
  min-height: 100vh;
  background-color: #F9F9F9;
  padding-top: 50rpx;

  // 头部
  & .head {
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    & .left {
      display: flex;
      align-items: center;

      &::v-deep .u-checkbox {
        margin: 0;
      }

      & .text {
        margin-left: 20rpx;
        font-weight: 500;
        font-size: 28rpx;
        color: #666666;
      }
    }

    & .right {
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
    }
  }

  // 购物车列表
  .car-list-box {
    padding-bottom: 186rpx;

    & .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 30rpx;
      padding: 0 30rpx;

      // 购物车信息
      & .card {
        display: flex;
        justify-content: space-between;
        // margin-left: 30rpx;
        padding: 20rpx;
        padding-bottom: 40rpx;
        width: 624rpx;
        background: #FFFFFF;
        border-radius: 10rpx;

        & .left {
          position: relative;
          width: 120rpx;
          height: 120rpx;
          overflow: hidden;
          border-radius: 10rpx;

          & .mask-box {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 9;
            width: 120rpx;
            height: 120rpx;
            line-height: 120rpx;
            text-align: center;
            background: rgba(0, 0, 0, 0.5);

            & text {
              font-weight: 500;
              font-size: 20rpx;
              color: #FFC870;
            }
          }
        }

        & .right {
          width: 444rpx;

          // 标题
          & .title {
            width: 444rpx;
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
          }

          // 规格
          & .sku {
            display: flex;
            justify-content: space-between;
            margin-top: 10rpx;

            & text {
              font-weight: 400;
              font-size: 24rpx;
              color: #333333;
            }
          }

          // 价格和数量
          & .price-box {
            display: flex;
            align-items: center;
            margin-top: 10rpx;

            & .present-price {
              font-weight: 500;
              font-size: 28rpx;
              color: #FF3141;
            }

            & .original-price {
              margin-left: 10rpx;
              font-weight: 400;
              font-size: 20rpx;
              color: #666666;
              text-decoration-line: line-through;
            }
          }
        }
      }
    }
  }

  // 底部栏
  .bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    height: 176rpx;
    background: #FFFFFF;

    & .content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18rpx 30rpx;

      &::v-deep .u-button {
        width: 690rpx;
        height: 90rpx;
        font-weight: 500;
        font-size: 32rpx;
        color: #FFFFFF;
        border: none;
        background: #FFA618;
        border-radius: 50rpx;
      }
    }
  }
}
</style>